<template>
<div>
         牛逼六六六
  <el-form :inline="true" :model="formInline" class="demo-form-inline">
    <el-form-item label="职务">
      <el-input v-model="formInline.jobName" placeholder="输入职务"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="list">查询</el-button>
    </el-form-item>
  </el-form>
  <el-button @click="dialogFormVisible=true"
             type="warning"
  >添加</el-button>
  <el-table
      :data="tableData"
      style="width: 100%"
      :row-class-name="tableRowClassName">
    <el-table-column
        prop="seniorId"
        label="id"
        width="180">
    </el-table-column>
    <el-table-column
        prop="seniorName"
        label="姓名"
        width="180">
    </el-table-column>
    <el-table-column
        prop="time"
        label="时间">
    </el-table-column>
    <el-table-column
        prop="proportion"
        label="占比">
    </el-table-column>
    <el-table-column
        prop="positions"
        label="持股">
    </el-table-column>
    <el-table-column
        prop="jobName"
        label="职务">
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
            size="mini"
            @click="handleEdit(scope.row)">编辑</el-button>
        <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
      background
      layout="prev, pager, next"
      :page-size="formInline.pageSize"
      :current-page="formInline.pageNum"
      @current-change="newpa"
      :total="total">
  </el-pagination>
  <el-dialog title="高管信息" :visible.sync="dialogFormVisible">
    <el-form :model="addform">
      <el-form-item label="姓名" :label-width="formLabelWidth">
        <el-input v-model="addform.seniorName" ></el-input>
      </el-form-item>
      <el-form-item label="职务" :label-width="formLabelWidth">
        <el-checkbox-group v-model="addform.jobId">
          <el-checkbox v-for="c in jobList" :key="c.jobId"  :value="c.jobId" :label="c.jobName"></el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="占比" :label-width="formLabelWidth">
        <el-input v-model="addform.proportion"></el-input>
      </el-form-item>
      <el-form-item label="持股" :label-width="formLabelWidth">
        <el-input v-model="addform.positions"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="add">确 定</el-button>
    </div>
  </el-dialog>
</div>
</template>

<script>
export default {
  data(){
    return{
      formLabelWidth:"120px",
      //新增修改
      addform:{
        jobId:[]
      },
      // 对话框默认关闭
      dialogFormVisible:false,
      //  高管form
      formInline:{
        pageNum:1,
        pageSize:3
      },
      //列表
      tableData:[],
      // 总条数
      total:0,
      jobList:[]
    }
  },
  created() {
     this.list()
    this.joblist()
  },
  methods:{
    /**
     * 修改
     */
    handleEdit(row){
      console.log(row)
      let bankLname = row.jobName;
      console.log(bankLname)
      let s1 = bankLname.substring(0,4);
      console.log(s1)
      let s2 = bankLname.substring(5,9);
      console.log(s2)
      let s3 = bankLname.substring(10,14);
      console.log(s3)
      this.addform=row      // 语文  数学 英语 结构的
      this.addform.jobId=[s1,s2,s3]
      this.dialogFormVisible=true
    },
    /**
     * 添加按钮
     */
    add(){
      this.axios.post("http://localhost:8005/senior/addsenior",this.addform).then(r=>{
        this.$message.success(r.data.data)
        this.dialogFormVisible=false
        this.list()
      })
    },
    /**
     * 查询job
     */
    joblist(){
       this.axios.get("http://localhost:8005/senior/jobList").then(r=>{
         this.jobList=r.data.data
       })
    },
    /**
    查询按钮
     */
    list(){
      this.axios.post("http://localhost:8005/senior/seniorList",this.formInline).then(r=>{
        console.log(r)
        this.tableData=r.data.data.list
        this.total=r.data.data.total
      })
    },
    /**
     * 分页改变调用
     */
    newpa(newo){
      this.formInline.pageNum=newo
      this.list()
    },
    /**
     * 变颜色
     * @param row
     * @param rowIndex
     * @returns {string}
     */
    tableRowClassName({row, rowIndex}) {
      if (rowIndex === 1) {
        return 'warning-row';
      } else if (rowIndex === 3) {
        return 'success-row';
      }
      return '';
    }

  },

}
</script>

<style>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>